import { ShElement } from './ShElement'
import { ShMenu } from './ShMenu'

import * as shlib from '../shlib/browser'


export class ShWindow extends ShElement {
    
    private $droppedMenu: ShMenu | null = null
    private $sidebar: HTMLElement
    private $client: HTMLElement

    constructor() {
        super()

        this.$shadow.innerHTML = `
            <style>
                :host {
                    position: fixed;
                    inset: 0;
                    display: flex;
                    flex-direction: column;
                }
                #titlebar { 
                    height: 2.5em;
                    border-bottom: var(--border-ctrl);
                    display: flex;
                    align-items: center;
                }
                #titlebar > img {
                    margin: 0 0.5em;
                    width: 2em;
                    height: 2em;
                }
                #titlebar > ul {
                    margin: 0;
                    height: 100%;
                    padding: 0;
                    display: flex;
                }
                #titlebar > ul > li {
                    display: block;
                    list-style: none;
                    padding: 0 1em;
                    cursor: default;
                    user-select: none;
                    display: flex;
                    align-items: center;
                }
                #titlebar > ul > li:hover {
                    background-color: var(--color-primary) !important;
                    color: white !important;
                }
                #titlebar > label {
                    flex-grow: 1;
                    margin: 0 1em;
                    height: calc(2.5em - 6px);
                    border: var(--border-ctrl);
                    border-radius: 4px;
                    background: linear-gradient(to bottom, #f8f8f8, var(--color-ctrl));
                    color: blue;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                #workspace {
                    flex-grow: 1;
                    display: flex;
                    flex-direction: row;
                }
                #sidebar {
                    width: 25em;
                }
                #client {
                    flex-grow: 1;
                }
            </style>
            <div id="titlebar"> 
                <img></img>
                <ul><slot name="menubar"></slot></ul>
                <label></label>
                <sh-win-btn class="min"></sh-win-btn>
                <sh-win-btn class="max"></sh-win-btn>
                <sh-win-btn class="close"></sh-win-btn>
            </div>
            <div id="workspace">
                <div id="sidebar">
                    <slot name="sidebar"></slot>
                </div>
                <sh-v-splitter></sh-v-splitter>
                <div id="client">
                    <slot name="client"></slot>
                </div>
            </div>
        `

        const $label = this.$shadow.querySelector('label')!
        $label.on('pointerdown', () => {
            this.dispatchEvent(new Event('shev-win-dragstart', { bubbles: true, composed: true }))
        })
        $label.on('pointerup', () => {
            this.dispatchEvent(new Event('shev-win-dragend', { bubbles: true, composed: true }))
        })
        $label.on('dblclick', () => {
            const $btn = this.$shadow.querySelector('#titlebar > .max') || this.$shadow.querySelector('#titlebar > .restore')
            $btn?.dispatchEvent(new MouseEvent('click'))
        })
        
        this.$sidebar = this.$shadow.getElementById('sidebar')! as HTMLElement
        this.$client = this.$shadow.getElementById('client')! as HTMLElement

        const $splitter = this.$shadow.querySelector('sh-v-splitter')! as HTMLElement
        $splitter.on('shev-splitter-move', (e) => {
            this.$sidebar.style.width = this.$sidebar.offsetWidth + e.detail + 'px'
        })

        window.onblur = () => {
            // this.$droppedMenu?.hide()
        }
    }

    public setIcon(iconUrl: string) {
        this.$shadow.querySelector('img')!.src = iconUrl
    }

    public setTitle(title: string) {
        this.$shadow.querySelector('label')!.textContent = title
    }

    public setSidebarStyle(style: shlib.CssObject | string) {
        this.$sidebar.updateStyle(style)
    }

    public setClientStyle(style: shlib.CssObject | string) {
        this.$client.updateStyle(style)
    }

    public addMenu(name: string, $menu: ShMenu) {
        const $li = document.createElement('li')
        $li.textContent = name
        this.$shadow.querySelector('ul')!.append($li)

        $menu.on('clickout', () => {
            $menu.hide()
        })

        // 在弹出菜单显示时触发
        $menu.on('shev-popup-show', () => {
            $li.addClass('sh-selected')
            this.$droppedMenu = $menu
        })

        // 在弹出菜单隐藏时触发
        $menu.on('shev-popup-hide', () => {
            this.$droppedMenu = null
            $li.removeClass('sh-selected')
        })

        $li.on('pointerenter', () => {
            if (this.$droppedMenu && this.$droppedMenu !== $menu) {
                this.$droppedMenu.hide()
                $menu.show({
                    $ref: $li,
                    position: 'bottom-left',
                    anchor: 'top-left',
                    offset: { top: 0, left: 0 },            
                })
                // 还有一些操作在响应 shev-popup-show 事件的时候进行处理
            }
        })

        $li.on('pointerdown', () => {
            if (this.$droppedMenu === $menu)
                $menu.hide()
            else
                $menu.show({
                    $ref: $li,
                    position: 'bottom-left',
                    anchor: 'top-left',
                    offset: { top: 0, left: 0 },            
                })
        })
    }
}
customElements.define('sh-window', ShWindow)